<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div :style="{ padding: '24px', background: '#fff' }">
            <a-row type="flex" justify="space-between">
              <a-col>
                <div class="title">管理员管理</div>
              </a-col>
              <a-col>
                <a-button type="primary" @click="add()">创建新管理员</a-button>
              </a-col>
            </a-row>
            <a-table
              :columns="columns"
              :rowKey="(data) => data.aid"
              :dataSource="data"
            >
              <template slot="password" slot-scope="data">
                <a-row type="flex" align="middle">
                  <a-input
                    style="width: 100px"
                    disabled
                    type="password"
                    :value="data.password"
                  />
                  <!-- <a-icon
                    class="ml1r cursor-pointer"
                    type="copy"
                    @click="getpassword(data.password,data.aid)"
                  /> -->
                </a-row>
              </template>
              <template slot="role" slot-scope="data">
                <a-row type="flex" align="middle">{{
                  data.role == 0
                    ? "黑名单"
                    : data.role == 2
                    ? "管理员"
                    : "超级管理员"
                }}</a-row>
              </template>
              <template slot="operation" slot-scope="data">
                <a class="operation" @click="edit(data.aid, data.name)">修改</a>
                <a v-if="data.aid != 1" class="operation" @click="del(data.aid)"
                  >删除</a
                >
                <a
                  v-if="data.aid != 1"
                  class="operation margin-left"
                  @click="del(data.aid)"
                  >禁止</a
                >
              </template>
            </a-table>
          </div>
          <a-modal
            title="修改用户信息"
            v-model="visible"
            @ok="handleOk"
            okText="确认"
            cancelText="取消"
          >
            <p class="margin-bottom-xs">用户名：</p>
            <p>
              <a-input v-model="name" placeholder="用户名" />
            </p>
            <p class="margin-bottom-xs">密码：</p>

            <p>
              <a-input v-model="oldpassword" placeholder="旧密码" />
            </p>
            <p>
              <a-input v-model="password" placeholder="新密码" />
            </p>
            <p class="margin-bottom-xs">权限选择：</p>
            <p>
              <a-checkbox-group @change="onChange">
                <a-row>
                  <a-col :span="4">
                    <a-checkbox value="8">轮播图</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="11">资源</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="5">文章</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="6">会员</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="7">媒体</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="9">留言</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="4">友链</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="10">站点</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </p>
          </a-modal>
          <a-modal
            title="新增用户"
            v-model="addvisible"
            @ok="adduser"
            okText="确认"
            cancelText="取消"
          >
            <p class="margin-bottom-xs">用户名：</p>
            <p>
              <a-input v-model="name" placeholder="用户名" />
            </p>
            <p class="margin-bottom-xs">角色：</p>
            <p>
              <a-select
                defaultValue="选择角色"
                style="width: 120px"
                @change="handleRole"
              >
                <a-select-option value="1">超级管理员</a-select-option>
                <a-select-option value="2">站点管理员</a-select-option>
              </a-select>
            </p>
            <p class="margin-bottom-xs">密码：</p>
            <p>
              <a-input v-model="password" placeholder="密码" />
            </p>
            <p>
              <a-input v-model="oldpassword" placeholder="确认密码" />
            </p>
            <p class="margin-bottom-xs">权限选择：</p>
            <p>
              <a-checkbox-group @change="onChange">
                <a-row>
                  <a-col :span="4">
                    <a-checkbox value="8">轮播图</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="11">资源</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="5">文章</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="6">会员</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="7">媒体</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="9">留言</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="4">友链</a-checkbox>
                  </a-col>
                  <a-col :span="4">
                    <a-checkbox value="10">站点</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </p>
          </a-modal>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
const columns = [
  {
    title: "ID",
    dataIndex: "aid",
  },
  {
    title: "用户名",
    dataIndex: "name",
  },
  {
    title: "角色",
    scopedSlots: { customRender: "role" },
  },
  {
    title: "密码",
    scopedSlots: { customRender: "password" },
  },
  {
    title: "添加时间",
    dataIndex: "time",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];
export default {
  metaInfo: {
    title: "管理员管理",
  },
  data() {
    return {
      data,
      columns,
      visible: false,
      addvisible: false,
      name: "",
      role: "",
      password: "",
      oldpassword: "",
      menuList: [], //权限菜单
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getlst();
    this.setsiders();
  },
  methods: {
    onChange(checkedValues) {
      // console.log("checked = ", checkedValues);
      this.menuList = checkedValues;
    },
    add() {
      this.addvisible = true;
    },
    adduser() {
      this.role=this.menuList.join(',');
      const url = "/Admin/UserManage/adduser";
      const paramObj = {
        token: localStorage.getItem("token"),
        aid: this.aid,
        name: this.name,
        role: this.role,
        oldpassword: this.oldpassword,
        password: this.password,
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("新增成功");
          this.addvisible = false;
          this.getlst();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    edit(aid, name) {
      this.visible = true;
      this.aid = aid;
      this.name = name;
    },
    handleOk() {
      this.role=this.menuList.join(',');
      const url = "/Admin/UserManage/changeManageInfo";
      const paramObj = {
        token: localStorage.getItem("token"),
        aid: this.aid,
        name: this.name,
        role: this.role,
        oldpassword: this.oldpassword,
        password: this.password,
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.visible = false;
          this.getlst();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    del(e) {
      var _this = this;
      _this.$confirm({
        title: "该操作不可逆，确定删除该管理员?",
        okText: "是的",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          const url = "/Admin/UserManage/deluser";
          const paramObj = {
            aid: e,
            token: localStorage.getItem("token"),
          };
          _this.$server.sl("GET", url, paramObj).then((res) => {
            if (res.code == 1) {
              _this.getlst();
              this.$message.success("删除成功");
            } else if (res.code == 4001) {
              _this.$router.push("/Auth/login");
              _this.$message.warning("凭证失效，请重新登陆");
            } else {
              _this.$message.warning(res.msg);
            }
          });
        },
        onCancel() {},
      });
    },
    getlst() {
      const url = "/Admin/UserManage/usermanage";
      const paramObj = {
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.data = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取失败，请刷新重试");
        }
      });
    },
    // getpassword(password, aid) {
    //   this.$message.success("复制成功");
    //   this.postAxios("/Admin/UserManage/verifycode", {
    //     token: localStorage.getItem("token"),
    //     aid: aid,
    //     code: password
    //   }).then(res => {
    //     if (res.code == 1) {
    //       var code = res.data;
    //       password = code.slice(0, -6);
    //       this.$copyText(password).then(
    //         function() {},
    //         function() {}
    //       );
    //     } else if (res.code == 4001) {
    //       this.$router.push("/Auth/login");
    //       this.$message.warning("凭证失效，请重新登陆");
    //     } else {
    //       this.$message.warning("失败，请刷新重试");
    //     }
    //   });
    // },
    //权限选择
    handleRole(value) {
      this.role = value;
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "2");
    },
  },
};
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
.picurl {
  height: 3rem;
}
.operation:first-child {
  margin-right: 1rem;
}
</style>